<template>

  <div style="margin-left: 30%;margin-top: 10%" v-show="top_show">
    <el-steps :active="active" finish-status="success" style="width: 50%">
      <el-step title="上传.jx3dat文件"></el-step>
      <el-step title="选择出警对象"></el-step>
      <el-step title="查看复盘结果"></el-step>
    </el-steps>
<!--    <el-button style="margin-top: 12px;" @click="next">下一步</el-button>-->
    <div v-show="upload_show">
      <el-upload
        class="upload-demo"
        drag
        accept=".jx3dat"
        :action= baseURL1
        :before-upload="beforeUploadFile"
        :on-success="afterUploadFile"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip">

            <br><br><br><el-button size="mini" round type="primary" @click="goPage('https://www.jx3box.com/tool/22318')">目前只支持出警自己，点击查看.jx3dat文件获取方式</el-button><br><br>
          </div>
        </template>
      </el-upload>
    </div>
    <div v-show="tar_show">
      <br>
      出警对象：<el-button style="margin-top: 12px;" @click="next">{{this.detail_uuid.jcl_name}}</el-button>
    </div>
    <div v-show="link_show">
      <br>
      <el-button  @click="getdetail()">点击跳转复盘</el-button>
    </div>

  </div>

</template>


<script>
  import { jcl } from '../../api/jcl'

  let baseURL = 'http://127.0.0.1:8005'// url = base url + request url
  // var  baseURL: 'http://jx33.jasonsong.top' // url = base url + request url
  export default {
    name:'analyse',
    data() {
      return {
        detail_uuid : {
          'jcl_name':'',
          'jcl_uuid':'',
        },

        baseURL1 : baseURL+ "/api/analyse_detail",
        upload_show:true,
        tar_show:false,
        link_show:false,
        top_show:true,
        active: 0,
        num_min: 1,
        num_max: 50,
        num:0,
      };
    },
    methods: {
      getdetail (){
        this.$router.push({
          path: '/analyse/ana_detail',
          query:this.detail_uuid
        }) // 带参跳转

      },
      goPage (url) {
        window.open(url,"_blank");
      },
      next() {
        if (this.active++ > 2) this.active = 0
        if (this.tar_show === true) {this.link_show = true ; this.tar_show = false}
        if (this.upload_show === true) {this.tar_show = true ; this.upload_show = false}

      },
      afterUploadFile(response){
        if (this.active++ > 2) this.active = 0
        if (this.tar_show === true) {this.link_show = true ; this.tar_show = false}
        if (this.upload_show === true) {this.tar_show = true ; this.upload_show = false}
        console.log(response.data)
        this.detail_uuid.jcl_name = response.data.name
        this.detail_uuid.jcl_uuid = response.data.uuid
        }
      },
      handleChange(value, direction, movedKeys) {
        console.log(value, direction, movedKeys);
      },
      beforeUploadFile(file) {
        // console.log(file)
        const extension = file.name.substring(file.name.lastIndexOf('.') + 1)
        const size = file.size / 1024 / 1024
        if (extension !== 'jx3dat') {
          this.$notify.warning({
            title: '警告',
            message: `只能上传剑三战斗复盘（即后缀是.jx3dat）的文件`
          })
        }
        if (size > 10) {
          this.$notify.warning({
            title: '警告',
            message: `文件大小不得超过10M`
          })
        }
      },
      // 文件状态改变时的钩子
      fileChange(file, fileList) {
        // console.log(file)
        // console.log(fileList)
      },
      // 文件超出个数限制时的钩子
      exceedFile(files, fileList) {

      },
    }
</script>

<style scoped>

</style>
